<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理页面</title>
<link rel="stylesheet" type="text/css"
	href="../../libs/jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../libs/jquery-easyui-1.9.5/themes/icon.css">
<script type="text/javascript"
	src="../../libs/jquery-easyui-1.9.5/jquery.min.js"></script>
<script type="text/javascript"
	src="../../libs/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
</head>
<body>



	<table id="user_dg" title="用户管理" class="easyui-datagrid"
		style="width: 100%; height: 500px" url="http://localhost/user/list"
		toolbar="#user_toolbar" rownumbers="true" fitColumns="true"
		singleSelect="true" pagination="true">
		<thead>
			<tr>
				<th field="userNo" width="50">编号</th>
				<th field="userName" width="50">账号</th>
				<th field="nickName" width="50">昵称</th>
				<!-- 使用格式化器格式化密码 -->
				<th field="password" formatter="passwordFormatter" width="50">密码</th>
				<th field="userEmail" width="50">邮箱</th>
				<th field="userPhone" width="50">电话</th>
				<th field="userDate" width="50">入职时间</th>
				<th field="userImage" formatter="imageFormatter" width="50">入职时间</th>
			</tr>
		</thead>
	</table>
	<div id="user_toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			onclick="newUser()">新增</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editUser()">修改</a> <a
			href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
			onclick="destroyUser()">删除</a>
	</div>


	<!-- 新增和修改对话框 -->
	<div id="user_dlg" class="easyui-dialog"
		style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
		buttons="#user_dlg-buttons">
		<div class="ftitle">用户信息</div>
		<!-- 上传表单的编码类型必须是：multipart/form-data  -->
		<form id="user_fm"  enctype="multipart/form-data"   method="post">
			<div class="fitem">
			    <!-- 给账号增加一个id="userName"，用于控制账号的禁用和启用 -->
				<label>账号:</label> <input id="userName" name="userName"   class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>密码:</label> <input name="password" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label>昵称:</label> <input name="nickName">
			</div>
			<div class="fitem">
				<label>电话:</label> <input name="userPhone">
			</div>
			<div class="fitem">
				<label>邮箱:</label> <input name="userEmail" class="easyui-validatebox"
					validType="email">
			</div>
			<div class="fitem">
				<label>用户头像:</label> <input name="file1" class="easyui-filebox">
			</div>
		</form>
	</div>
	<div id="user_dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="saveUser()">保存</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel"
			onclick="javascript:$('#user_dlg').dialog('close')">充填</a>
	</div>



	<script type="text/javascript">
	    var url ;
	
	    function editUser(){
	    	//取得列表中被选中的 数据
	    	var row = $('#user_dg').datagrid('getSelected');
	    	//如果有数据被选中
	    	if (row){
	    		
	    		$('#user_dlg').dialog('open').dialog('setTitle','修改用户');
	    		//把选中的数据填充到用户表单中
	    		$('#user_fm').form('load',row);
	    		//禁用用户账号修改
	    		$("#userName").textbox({disabled:true})
	    		//更新保存用户信息的地址
	    		url = '../../user/edit?userNo='+row.userNo;
	    	}else{
	    		
	    		$.messager.show({
					title: 'Warning',
					msg: '请选择要修改的数据'
				});
	    	}
	    	
	    }
	    
		//弹出新增对话框
		function newUser() {
			//弹出对话框
			$('#user_dlg').dialog('open').dialog('setTitle', '新增用户');
			//清空表单
			$('#user_fm').form('clear');
			//启用用户账号新增
			$("#userName").textbox({disabled:false})
			//保存数据的api地址
			url = '../../user/add';
		}
		
		
		
		//保存数据- 新增和修改公用
		function saveUser(){
			$('#user_fm').form('submit',{
				url: url,
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(result){
					var res = eval('('+result+')');
					console.log(res)
					if (!res.success){
						$.messager.show({
							title: 'Error',
							msg: res.message
						});
					} else {
						$('#user_dlg').dialog('close');		// close the dialog
						$('#user_dg').datagrid('reload');	// reload the user data
					}
					
					
				}
			});
		}
		
		
		function destroyUser(){
			var row = $('#user_dg').datagrid('getSelected');
			//如有数据被选中
			if (row){
				//弹出确认删除对话框
				$.messager.confirm('Confirm','确认删除？误删明天不能考试?',function(r){
					if (r){
						$.post('../../user/delete',{userNo:row.userNo},function(result){
							
							if (result.success){
								$('#user_dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.message
								});
							}
						},'json');
					}
				});
			}else{
				$.messager.show({	// show error message
					title: 'Error',
					msg: '请选择要删除的数据'
				});
			}
		}
		
		//使用easyui格式化器显示特定的数据 - 本例隐藏密码
		function passwordFormatter(value,index,row){
			return "******";
		}
		
		//图片格式化器，用于显示用户头像
		function imageFormatter(value,index,row){
			return "<img src='../"+value+"' style='height:80px'></img>";
		}
		
		
	</script>

</body>
</html>